<template>
  <div class="page">
    <!-- 导航栏 暂时只有角色图鉴 先将此处的导航栏隐藏-->
    <el-row class="navContainer" v-show="false">
      <el-col :span="3"
        v-for="(c1, index) in conditionList"
        :key="c1.conditionId"  
      >
        <div class="nav" :class="index == currentNavIndex ? 'navActive' : ''" @click="changeNavIndex(index)">{{ c1.name }}</div>
      </el-col>
    </el-row>

    <!-- 条件选择框 -->
    <!-- 一级筛选条件：判断用户是在浏览角色还是武器 -->
    <el-row
      v-for="(c1, index1) in conditionList"
      :key="c1.conditionId"
      v-show="index1 == currentNavIndex"
    >
      <!-- 二级筛选条件 -->
      <el-col :span="6" v-for="(c2, index2) in c1.conditionChild" :key="c2.conditionId">
        <el-row type="flex" justify="center" style="margin-top:30px">
          <el-select
            v-model="seletedValueList[index2]"
            :placeholder="c2.name"
            @change="getSelecedRoles"
          >
            <el-option
              v-for="(c3, index) in c2.conditionChild"
              :key="index"
              :label="c3"
              :value="c3"
            >
            </el-option>
          </el-select>
        </el-row>
      </el-col>
    </el-row>

    <!--展示筛选后结果-->

    <el-row class="selectedRoleContainer">
      <el-col :span="24" class="notFoundTips" v-show="selectedRoleList.length == 0 || currentNavIndex == 1">
        未检索到相关词条
      </el-col>
      <el-col
        :lg="{span:'3-4'}" :md="{span:'4-8'}" :sm="{span:4}" :xs="{span:6}"
        v-for="(roleInfo) in selectedRoleList"
        :key="roleInfo._id"
        type="flex" justify="center" align="center"
        v-show="currentNavIndex == 0"
      >
        <el-row type="flex" justify="center">
          <el-col :span="20"> 
            <div class="roleItem">
              <div class="roleImage">
                <img :src="roleInfo.imageUrl" />
              </div>
              <div class="roleName">{{ roleInfo.name }}</div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>


  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      currentNavIndex: 0,
      seletedValueList: [],
    };
  },
  computed: {
    ...mapState({
      conditionList: (state) => {
        return state.home.conditionList || [];
      },

      selectedRoleList: (state) => {
        return state.home.selectedRoleList || [];
      },
    }),

    currentConditionChild() {
      return this.conditionList[this.currentNavIndex].conditionChild || [];
    },

    selectValueObject() {
      let arr = this.seletedValueList;
      let obj = {};
      arr.forEach((item, index) => {
        obj[this.currentConditionChild[index].conditionName] = item;
      });

      return obj;
    },
  },
  methods: {
    //修改当前所在的导航页
    changeNavIndex(target) {
      this.currentNavIndex = target;
      this.seletedValueList = []
    },

    //派发一个获取对应条件下的角色列表的action
    getSelecedRoles() {
      this.$store.dispatch("getSelectedRoles", this.selectValueObject);
    },
  },
  mounted() {
    this.$store.dispatch("getConditionList");
    this.getSelecedRoles();
  },
};
</script>

<style scoped lang="less">
@media only screen and (min-width: 1500px) {
  .page .selectedRoleContainer .el-col-lg-3-4{
        width:14.2%;
  }
}
@media only screen and (max-width: 1500px) and (min-width: 1200px){
  .page .selectedRoleContainer .el-col-lg-3-4{
        width:16.6%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px){
  .page .selectedRoleContainer .el-col-md-4-8{
        width:20%;
  }
}
.page {
  box-sizing: border-box;
  background-color: #ffffff;
  .navContainer {
    padding: 15px;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 3px 3px 0 0;
    .nav {
      height: 25px;
      text-align: center;
      &:hover{
        cursor: pointer;
      }
    }
    .navActive {
      color: #b59b90;
      font-weight: 700;
      border-bottom: 2px solid #b59b90;
    }
  }

  .selectContainer {
    height: 50px;
    background-color: #ffffff;
    .el-select {
      height: 20px;
      margin: 0 10px 0 10px;
    }
  }

  .selectedRoleContainer {
    height: 600px;
    overflow: scroll;
    padding-top: 15px;
    background-color: #ffffff;
    box-sizing: border-box;
    border-radius: 0 0 3px 3px;
    .notFoundTips {
      height: 600px;
      color: #b59b90;
      text-align: center;
      line-height: 600px;
    }
    .roleItem {
      margin: 0 0 30px 0;
      padding-top: 1px;
      box-sizing: border-box;
      border: 2px solid #b59b90;
      border-radius: 3px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .roleImage img {
        width: calc(100% - 3px);
        border-radius: 3px;
      }
      .roleName {
        width: calc(100% - 3px);
        height: 25px;
        line-height: 25px;
        text-align: center;
      }
    }
  }

}
</style>